<%@page import="br.com.trabalho.entidades.Usuario"%>
<%@page import="br.com.trabalho.util.Util"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.util.List"%>
<%@page import="br.com.trabalho.entidades.Ingrediente"%>
<%@page import="br.com.trabalho.entidades.Receita"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link href="css/bootstrap.css" rel="stylesheet">
        <link href="css/bootstrap-switch.css" rel="stylesheet">
        <script src="js/jquery-2.1.1.min.js"></script>
        <script src="js/bootstrap.js"></script>
        <script src="js/bootstrap-switch.js"></script>
        <script src="js/funcoes.js"></script> 
        <meta property="og:site_name" content="Portal de Receitas"/>
        <meta property="og:locale" content="pt_BR"/>
        <title>Receita</title>            
        <style>
            input{
                margin-right: 2px;
            }
            label{
                width: 130px;
            }
            textarea{
                width: 100%;
            }
            select{
                width: 200px;
            }
            .i_input{
                width: 350px;
                margin-bottom: 5px;
            }
        </style>
    </head>
    <body>
        <%@ include file="template.jsp" %>
        <c:if test="${param.edit == null}">
            <div class="container">
                <div class="col-sm-12 col-md-12 col-lg-12 col-12" style="min-height: 500px">
                    <div id="mensagens" role="alert" style="text-align: center;"></div>
                    <form action="new_recipe" method="POST" onsubmit="return validaCadastroReceita(this)" en>
                        <fieldset>
                            <legend>
                                Nome da Receita
                            </legend>
                            <div class="input-group">
                                <input name="nome" type="text" class="form-control" style="height: 44px;"/>
                                <span class="input-group-addon"> 
                                    <input type="checkbox" class="form-control" name="acesso" data-on-text="Disp" data-off-text="Indis" checked>
                                </span>
                            </div>
                        </fieldset>
                        <fieldset>
                            <legend>
                                Breve Descrição da Receita
                            </legend>
                            <input name="desc" type="text" class="form-control" style="height: 44px; width: 100%"/>
                        </fieldset>

                        <fieldset>
                            <legend>
                                Categoria
                            </legend>
                            <select name="categoria">
                                <option value="Doces">Doces</option>
                                <option value="Salgados">Salgados</option>
                                <option value="Aperitivos">Aperitivos</option>
                                <option value="Bebidas">Bebidas</option>
                                <option value="Fast-food">Fast-food</option>
                            </select><br/>
                            <input name="valorNutricional" placeholder="Valor Nutricional"/>
                        </fieldset>

                        <fieldset>
                            <legend>
                                Ingredientes
                            </legend>
                            <button type="button" class="btn btn-primary" onclick="adicionarIngrediente();">Adicionar Ingrediente</button>
                            <div id="ingredientes">
                                <br/>
                            </div>
                            <input type="hidden" id="qtd_ingredientes" name="qtd_ingredientes" value="0"/>
                        </fieldset>

                        <fieldset>
                            <legend>
                                Preparação
                            </legend>
                            <input name="tempoPreparo"  placeholder="Tempo de Preparo"/>
                            <input name="cozimento" placeholder="Método de Cozimento"/>
                            <textarea name="preparacao" placeholder="Modo de Preparo"></textarea><br>
                        </fieldset>

                        <fieldset>
                            <legend>
                                Modo de Servir
                            </legend>                        
                            <input name="porcoes"  placeholder="Porções"/>
                            <textarea  name="modoServir" placeholder="Modo de Servir"></textarea>
                        </fieldset>
                        <fieldset>
                            <legend>
                                Multimidia
                            </legend>
                            <input type="file" name="foto"/> 
                        </fieldset>
                        <input type="hidden" name="cadastro" value="true"/>
                        <div class="form-group" style="float:right;">   
                            <a type="button" href="index.jsp" class="btn btn-danger" >Cancelar</a>
                            <input value="Cadastrar" class="btn btn-primary" style=" margin: 0 0;" type="submit"/>
                        </div>
                    </form>
                </div>
            </div>
        </c:if>
        <c:if test="${param.edit != null}">            
            <div class="container">
                <div class="col-sm-12 col-md-12 col-lg-12 col-12" style="min-height: 500px">
                    <div id="mensagens" role="alert" style="text-align: center;"></div>
                    <form action="new_recipe" method="POST" onsubmit="return validaCadastroReceita(this)">
                        <fieldset>
                            <legend>
                                Nome da Receita
                            </legend>
                            <div class="input-group">
                                <input name="nome" type="text" class="form-control" style="height: 44px;" value='${sessionScope.RECEITA_PARA_EDICAO.nome}'/>
                                <span class="input-group-addon"> 
                                    <input type="checkbox" class="form-control" name="acesso" data-on-text="Disp" data-off-text="Indis" checked='${sessionScope.RECEITA_PARA_EDICAO.disponivel}'>
                                </span>
                            </div>
                        </fieldset>

                        <fieldset>
                            <legend>
                                Breve Descrição da Receita
                            </legend>
                            <input name="desc" type="text" class="form-control" style="height: 44px; width: 100%" value='${sessionScope.RECEITA_PARA_EDICAO.descricao}'/>
                        </fieldset>

                        <fieldset>
                            <legend>
                                Categoria
                            </legend>
                            <select name="categoria">
                                <c:forEach var="categoria" items="${sessionScope.CATEGORIAS}">
                                    <option value ="${categoria}"
                                            <c:if test="${categoria == sessionScope.RECEITA_PARA_EDICAO.categoria}">
                                                selected
                                            </c:if>
                                            >${categoria}</option>
                                </c:forEach>
                            </select><br/>
                            <input name="valorNutricional" value='${sessionScope.RECEITA_PARA_EDICAO.valorNutricional}'  placeholder="Valor Nutricional"/>
                        </fieldset>

                        <fieldset>
                            <legend>
                                Ingredientes
                            </legend>
                            <button type="button" class="btn btn-primary" onclick="adicionarIngrediente();">Adicionar Ingrediente</button>

                            <div id="ingredientes">
                                <c:forEach items="#{sessionScope.INGREDIENTES_HTML}" var="item">
                                    ${item}
                                </c:forEach>
                            </div>

                            <input type="hidden" id="qtd_ingredientes" name="qtd_ingredientes" value='${sessionScope.RECEITA_PARA_EDICAO.ingredientes.size()}'/>
                        </fieldset>

                        <fieldset>
                            <legend>
                                Preparação
                            </legend>
                            <input name="tempoPreparo"  placeholder="Tempo de Preparo" value='${sessionScope.RECEITA_PARA_EDICAO.tempo}'/>
                            <input name="cozimento" type="text" placeholder="Método de Cozimento" value='${sessionScope.RECEITA_PARA_EDICAO.metodoCozimento}'/>
                            <textarea name="preparacao" placeholder="Modo de Preparo">${sessionScope.RECEITA_PARA_EDICAO.preparacao}</textarea><br>
                        </fieldset>

                        <fieldset>
                            <legend>
                                Modo de Servir
                            </legend>
                            <input name="porcoes"  placeholder="Método de Cozimento" value='${sessionScope.RECEITA_PARA_EDICAO.porcoes}'/>
                            <textarea  name="modoServir">${sessionScope.RECEITA_PARA_EDICAO.modoDeServir}</textarea>
                        </fieldset>
                        <fieldset>
                            <legend>
                                Multimidia
                            </legend>
                            <input type="file"/>
                        </fieldset>
                        <input type="hidden" name="id" value='${sessionScope.RECEITA_PARA_EDICAO.id}'/>
                        <input type="hidden" name="edicao" value='true'/>
                        <div class="form-group" style="float:right;">   
                            <a type="button" href="index.jsp" class="btn btn-danger" >Cancelar</a>
                            <input value="Editar" class="btn btn-primary" style=" margin: 0 0;" type="submit"/>
                        </div>
                    </form>
                </div>
            </div>
        </c:if>        
        <script>
            var count = 0;
            $(document).ready(function () {
                $("[name='acesso']").bootstrapSwitch();
                $('#acesso').bootstrapSwitch('setOnLabel', 'Sim');
                $('#acesso').bootstrapSwitch('setOffLabel', 'Não');

                //Adiciona placeholder em navegadores sem suporte a tag
                function add() {
                    if ($(this).val() == '') {
                        $(this).val($(this).attr('placeholder')).addClass('placeholder');
                    }
                }

                function remove() {
                    if ($(this).val() == $(this).attr('placeholder')) {
                        $(this).val('').removeClass('placeholder');
                    }
                }
                
                if (!('placeholder' in $('<input>')[0])) { // Create a dummy element for feature detection
                    $('input[placeholder], textarea[placeholder]').blur(add).focus(remove).each(add); // Select the elements that have a placeholder attribute
                    $('form').submit(function () {
                        $(this).find('input[placeholder], textarea[placeholder]').each(remove);
                    }); // Remove the placeholder text before the form is submitted
                }
            <c:if test="${param.edit != null}">
                count = ${sessionScope.RECEITA_PARA_EDICAO.ingredientes.size()};
            </c:if>
            });
        </script>        
        <div style="clear: both"></div>
        <footer style="text-align: center;">
            <%@ include file="footer.jsp" %>
        </footer>        
    </body>
</html>
